<template>
  <div class="materials-inventory-container">
    <h1>原料库</h1>
    <!-- 筛选部分 -->
    <div class="filter-section">
      <el-input v-model="filter.materialName" placeholder="请输入原料名称" clearable></el-input>
      <el-select v-model="filter.materialCategory" placeholder="请选择原料类别">
        <el-option v-for="category in materialCategories" :key="category" :label="category" :value="category"></el-option>
      </el-select>
      <el-select v-model="filter.store" placeholder="请选择门店">
        <el-option v-for="store in stores" :key="store" :label="store" :value="store"></el-option>
      </el-select>
      <el-button @click="queryMaterials">查询</el-button>
    </div>
    <!-- 数据列表部分 -->
    <div class="data-list-section">
      <el-button @click="exportToExcel">导出Excel</el-button>
      <el-table :data="materials" stripe>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="purchaseUnit" label="采购单位"></el-table-column>
        <el-table-column prop="category" label="分类"></el-table-column>
        <el-table-column prop="store" label="所属门店"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="inventoryTime" label="盘点时间"></el-table-column>
        <el-table-column prop="stockLowerLimit" label="库存过底线"></el-table-column>
        <el-table-column prop="stockUpperLimit" label="库存超出线"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="viewAdjustmentRecord(scope.row.id)">调整记录</el-button>
            <el-button @click="editMaterial(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalItems"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 调整记录弹窗 -->
    <el-dialog v-model="adjustmentRecordDialogVisible" title="调整记录" custom-class="adjustment-record-dialog">
      <el-table :data="adjustmentRecords" stripe>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="operator" label="操作人"></el-table-column>
        <el-table-column prop="operation" label="操作"></el-table-column>
        <el-table-column prop="previousStock" label="修改前库存"></el-table-column>
        <el-table-column prop="stockChange" label="库存变动"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalItems"
        >
        </el-pagination>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="adjustmentRecordDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改原料弹窗 -->
    <el-dialog v-model="editMaterialDialogVisible" title="修改原料" custom-class="edit-material-dialog">
      <el-form :model="editMaterialForm" label-width="120px">
        <el-form-item label="原料名称">
          <el-input v-model="editMaterialForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model.number="editMaterialForm.stock"></el-input>
        </el-form-item>
        <el-form-item label="库存过低预警数">
          <el-input v-model.number="editMaterialForm.stockLowerLimit"></el-input>
        </el-form-item>
        <el-form-item label="库存超出预警数">
          <el-input v-model.number="editMaterialForm.stockUpperLimit"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editMaterialDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEditMaterial">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 筛选条件，与 IngredientInventoryFilterDTO 对应
const filter = ref({
  materialName: '',
  materialCategory: '',
  store: ''
});

// 原料类别
const materialCategories = ref(['肉类', '蔬菜类', '调料类']);
// 门店列表
const stores = ref(['大悦城店', '西单店', '泛海国际店']);
// 原料数据，与 IngredientInventoryVO 对应
const materials = ref([
  {
    id: 1,
    name: '猪肉',
    purchaseUnit: '千克',
    category: '肉类',
    store: '大悦城店',
    stock: 50,
    inventoryTime: '2024-01-01',
    stockLowerLimit: 10,
    stockUpperLimit: 100
  },
  {
    id: 2,
    name: '白菜',
    purchaseUnit: '斤',
    category: '蔬菜类',
    store: '西单店',
    stock: 80,
    inventoryTime: '2024-01-02',
    stockLowerLimit: 20,
    stockUpperLimit: 150
  },
  {
    id: 3,
    name: '盐',
    purchaseUnit: '袋',
    category: '调料类',
    store: '泛海国际店',
    stock: 30,
    inventoryTime: '2024-01-03',
    stockLowerLimit: 5,
    stockUpperLimit: 50
  }
]);
// 当前页码
const currentPage = ref(1);
// 每页数量
const pageSize = ref(10);
// 总条目数
const totalItems = ref(materials.value.length);

// 调整记录弹窗相关，与 IngredientAdjustmentRecordVO 对应
const adjustmentRecordDialogVisible = ref(false);
const adjustmentRecords = ref([
  {
    time: '2024-01-01 10:00',
    operator: '张三',
    operation: '增加库存',
    previousStock: 40,
    stockChange: 10
  },
  {
    time: '2024-01-02 14:30',
    operator: '李四',
    operation: '减少库存',
    previousStock: 50,
    stockChange: -5
  }
]);

// 修改原料弹窗相关
const editMaterialDialogVisible = ref(false);
const editMaterialForm = ref({
  id: null,
  name: '',
  stock: 0,
  stockLowerLimit: 0,
  stockUpperLimit: 0
});

// 查询原料
const queryMaterials = () => {
  // 这里后续添加请求后端接口的代码
  console.log('查询原料，筛选条件：', filter.value);
};

// 导出 Excel
const exportToExcel = () => {
  // 这里后续添加导出 Excel 的代码
  console.log('导出 Excel');
};

// 查看调整记录
const viewAdjustmentRecord = (id) => {
  adjustmentRecordDialogVisible.value = true;
  // 这里后续添加根据 id 获取调整记录的代码
  console.log('查看原料调整记录，ID：', id);
};

// 修改原料
const editMaterial = (id) => {
  const material = materials.value.find(item => item.id === id);
  if (material) {
    editMaterialForm.value = {
      id: material.id,
      name: material.name,
      stock: material.stock,
      stockLowerLimit: material.stockLowerLimit,
      stockUpperLimit: material.stockUpperLimit
    };
    editMaterialDialogVisible.value = true;
  }
  console.log('修改原料，ID：', id);
};

// 保存修改原料
const saveEditMaterial = () => {
  // 这里后续添加保存修改的代码
  console.log('保存修改原料：', editMaterialForm.value);
  editMaterialDialogVisible.value = false;
};

// 处理每页数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  queryMaterials();
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  queryMaterials();
};
</script>

<style scoped>
.materials-inventory-container {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.data-list-section button {
  margin-bottom: 10px;
}

.pagination-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 调整记录弹窗样式 */
.adjustment-record-dialog .el-dialog__header {
  background-color: #f0f9eb;
  border-bottom: 1px solid #e9f3e3;
}

.adjustment-record-dialog .el-dialog__body {
  padding: 20px;
}

.adjustment-record-dialog .el-dialog__footer {
  padding: 15px 20px;
  border-top: 1px solid #e9f3e3;
  text-align: right;
}

/* 修改原料弹窗样式 */
.edit-material-dialog .el-dialog__header {
  background-color: #f0f9eb;
  border-bottom: 1px solid #e9f3e3;
}

.edit-material-dialog .el-dialog__body {
  padding: 20px;
}

.edit-material-dialog .el-form-item {
  margin-bottom: 15px;
}

.edit-material-dialog .el-input {
  border-radius: 4px;
}

.edit-material-dialog .el-dialog__footer {
  padding: 15px 20px;
  border-top: 1px solid #e9f3e3;
  text-align: right;
}

/* 按钮样式 */
.el-button {
  border-radius: 4px;
}

.el-button--primary {
  background-color: #67c23a;
  border-color: #67c23a;
}

.el-button--primary:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}
</style>